<template>
  <div>
    <!-- 顶部导航 -->
    <!-- 给样式添加一个三元运算 -->
    <FilmTopNav ref="topnav" :class="fixed ? 'fixed' : ''"></FilmTopNav>
    <router-view></router-view>
  </div>
</template>

<script>
import FilmTopNav from "../../components/FilmTopNav";
export default {
  components: {
    FilmTopNav,
  },
  data() {
    return {
      // 默认不吸顶 触发数据
      fixed: false,
    };
  },
  mounted() {
    window.addEventListener(
      "scroll",
      (e) => {
        let top = document.documentElement.scrollTop;
        if (top > this.$refs.topnav.$el.offsetHeight) {
          // 吸顶
          this.fixed = true;
        } else {
          // 还原
          this.fixed = false;
        }
      },
      true
    );
  },
};
</script>

<style lang="scss" scoped>
// 吸顶样式
.fixed {
  position: fixed;
  top: 0;
  background: white;
  opacity: 0.6;
}
</style>
